<script lang="ts">
import { computed, defineComponent, ref, reactive, watch, watchEffect, onUnmounted } from "vue"
import { useI18n } from "vue-i18n";
import { getAssetsFile } from "@/utils/pub-use";
import { UserModule } from "@/store/modules/user";
import { getUserInfo, getRankInfo, getParameter, insertRank } from "@/api";
import { showToast, showDialog, showConfirmDialog } from 'vant';
import getRankList from "@/components/getRankList.vue";
import GetRankRewardList from "@/components/getRankRewardList.vue";
export default defineComponent({
    components: { getRankList, GetRankRewardList },
    setup() {
        const { t } = useI18n();
        const pageLoading = ref(true)
        const loading = ref([false])
        const userInfo = ref({})
        const parameter = ref({})
        const rankInfo = ref([])
        const gameList = ref([
            {
                name: "Experiencelevel",
                icon: getAssetsFile("vip1.png"),
                image: getAssetsFile("vip1-1.png")
            },
            {
                name: "primary",
                icon: getAssetsFile("vip2.png"),
                image: getAssetsFile("vip2-2.png")
            },
            {
                name: "intermediate",
                icon: getAssetsFile("vip3.png"),
                image: getAssetsFile("vip3-3.png")
            },
            {
                name: "advanced",
                icon: getAssetsFile("vip4.png"),
                image: getAssetsFile("vip4-4.png")
            },
            {
                name: "VIPlevel",
                icon: getAssetsFile("vip5.png"),
                image: getAssetsFile("vip5-5.png")
            },
        ])
        const sendInsertRank = async (amount) => {
            showConfirmDialog({
                title: t(`layout.participate`),
                beforeClose: async function (action: string): Promise<boolean> {
                    if (action === "confirm") {
                        try {
                            if (userInfo.value.USDT < Number(amount)) {
                                showToast(t("layout.theBalanceUSDTIsOnly") + userInfo.value.USDT);
                                return;
                            }
                            await UserModule.verifyToken();
                            const res = await insertRank({ amount })
                            if (res.data.code == 20) {
                                showDialog({ title: `${t("layout.success")}` })
                            } else {
                                showToast(res.data.message)
                            }
                            loadData()
                        } catch (error) {
                            showToast(error)
                        }
                        return false;
                    } else {
                        return true;
                    }
                },
            }).catch(() => { });
        }
        const loadData = async () => {
            pageLoading.value = true
            getRankInfo().then(res => {
                rankInfo.value = res.data.data || []
            })
            getParameter().then(res => {
                parameter.value = res.data.data.Parameter || []
                gameList.value.forEach((item: any, index: number) => item.amount = parameter.value['Amount' + (index + 1)])
            })
            userInfo.value = (await getUserInfo()).data.data.UserInfo || {}
            pageLoading.value = false
        }
        const timer = ref();
        watchEffect(() => {
            timer.value = setInterval(async () => {
                userInfo.value = (await getUserInfo()).data.data.UserInfo || {}
            }, 1500);
        });
        onUnmounted(() => {
            clearInterval(timer.value);
        });
        watch(
            () => UserModule.userAddr,
            (newUserAddr: string) => {
                if (newUserAddr) {
                    loadData();
                }
            },
            { immediate: true }
        );
        return {
            pageLoading,
            loading,
            gameList,
            parameter,
            rankInfo,
            sendInsertRank
        }
    }
})
</script>

<template>
    <div class="page">
        <div class="list">
            <div class="row" v-for="(item, index) in gameList" :key="index">
                <div class="content">
                    <div class="name">
                        <img :src="item.icon" alt="" srcset="">
                        {{ $t(`layout.${item.name}`) }}
                        <i></i>
                    </div>
                    <div class="value">
                        {{ item.amount }} USDT
                    </div>
                    <div class="progress">
                        <div class="text">{{ $t('layout.schedule') }}(<span>{{ rankInfo['C' + index] }}</span>/10)</div>
                        <van-progress :percentage="(rankInfo['C' + index] || 0) * 10" color="rgba(11, 166, 98, 1)"
                            :show-pivot="false" />
                    </div>
                    <van-button type="primary" @click="sendInsertRank(parameter['Amount' + (index + 1)])"
                        :disabled="pageLoading || !parameter['Amount' + (index + 1)]">{{ $t('layout.participate')
                        }}</van-button>
                </div>
                <img class="image" :src="item.image" alt="" srcset="">
            </div>
            <div class="logs">
                <p @click="$refs.logsRef.onRefresh()"><img src="@/assets/image/image6.png">{{
                    $t('layout.Participationrecord') }}</p>
                <p @click="$refs.rankRewardRefs.onRefresh()"><img src="@/assets/image/image6.png">{{
                    $t('layout.Invitationrewards') }}</p>
            </div>
        </div>
        <div class="details">
            <div class="title">{{ $t('layout.wayofparticipation') }}</div>
            <div class="name-box">
                <img src="@/assets/image/image.png">
                <div class="row">
                    <div class="name">{{ $t('layout.Numberofpeoplepergame') }}</div>
                    <div class="cell">10{{ $t('layout.people') }}</div>
                </div>
                <img src="@/assets/image/image.png">
            </div>
            <div class="name-box">
                <img src="@/assets/image/image.png">
                <div class="row">
                    <div class="name">{{ $t('layout.prizesettings') }}</div>
                </div>
                <img src="@/assets/image/image.png">
            </div>
            <div class="list">
                <ul>
                    <li>
                        <span>{{ $t('layout.Awards') }}</span>
                        <span>{{ $t('layout.quantity') }}</span>
                        <span>{{ $t('layout.Probabilityofwinning') }}</span>
                        <span>{{ $t('layout.investmentincome') }}</span>
                    </li>
                    <li>
                        <span>{{ $t('layout.SpecialPrize') }}</span>
                        <span>1{{ $t('layout.indivual') }}</span>
                        <span>10%</span>
                        <span>{{ $t('layout.Rewardcontributionvalueequaltotheinvestmentamount') }}</span>
                    </li>
                    <li>
                        <span>{{ $t('layout.firstprize') }}</span>
                        <span>1{{ $t('layout.indivual') }}</span>
                        <span>10%</span>
                        <span>{{ $t('layout.income') }}10%</span>
                    </li>
                    <li>
                        <span>{{ $t('layout.secondprize') }}</span>
                        <span>2{{ $t('layout.indivual') }}</span>
                        <span>20%</span>
                        <span>{{ $t('layout.income') }}5%</span>
                    </li>
                    <li>
                        <span>{{ $t('layout.thirdprize') }}</span>
                        <span>2{{ $t('layout.indivual') }}</span>
                        <span>20%</span>
                        <span>{{ $t('layout.income') }}4%</span>
                    </li>
                    <li>
                        <span>{{ $t('layout.FourthPrize') }}</span>
                        <span>4{{ $t('layout.indivual') }}</span>
                        <span>40%</span>
                        <span>{{ $t('layout.income') }}3%</span>
                    </li>
                </ul>
            </div>
            <div class="name-box">
                <img src="@/assets/image/image.png">
                <div class="row">
                    <div class="name">{{ $t('layout.Playerrewarddistributionratio') }}</div>
                    <div class="cell">{{ $t('layout.award') }}USDH 70%</div>
                    <div class="cell">{{ $t('layout.award') }}USDF 30%</div>
                </div>
                <img src="@/assets/image/image.png">
            </div>
        </div>
    </div>
    <get-rank-list ref="logsRef" :gameList="gameList" />
    <get-rank-reward-list ref="rankRewardRefs" />
</template>
 
<style lang="less" scoped>
.page {
    padding: 0 15px 15px 15px;

    .list {
        .row {
            margin-bottom: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 126px;

            background: #fff url("@/assets/image/image5.png") center/cover no-repeat;

            .image {
                width: 135px;
                margin-right: 20px;
            }

            .content {
                padding: 0 0 0 19px;

                .name {
                    display: flex;
                    align-items: center;
                    font-size: 12px;
                    font-weight: 500;
                    color: #1F2120;

                    img {
                        margin-right: 6px;
                        height: 16px;
                    }
                }


                .value {
                    padding: 6px 0 8px 0;
                    font-size: 20px;
                    font-weight: bold;
                    color: #0BA662;
                }

                .progress {
                    display: flex;
                    align-items: center;
                    font-size: 10px;
                    color: #909399;

                    span {
                        color: rgba(11, 166, 98, 1);
                    }

                    .van-progress {
                        margin-left: 9px;
                        height: 5px;
                        width: 63px;
                    }
                }

                .van-button {
                    margin-top: 12px;
                    width: 129px;
                    height: 28px;
                    font-size: 12px;
                    font-weight: bold;
                    border-radius: 14px;
                }
            }
        }
    }

    .logs {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40px;
        font-size: 15px;
        font-weight: bold;
        color: #0BA662;
        background: #FFFFFF;
        box-shadow: 0px 0 10px 0px rgba(11, 166, 98, 0.15);
        border-radius: 20px;

        img {
            margin-right: 12px;
            height: 15px;
        }

        p {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;

            &:last-child {
                border-left: 1px solid #eee;
            }
        }
    }
}

.details {
    margin-top: 15px;
    padding-bottom: 20px;
    background: #FFFFFF;
    border-radius: 8px;
    text-align: center;

    .title {
        display: inline-block;
        padding: 10px 54px;
        background: rgba(11, 166, 98, 0.05);
        border-radius: 0px 0px 8px 8px;
        border: 1px solid #FFFFFF;
    }

    .name-box {
        margin-top: 20px;
        display: flex;
        align-items: flex-start;
        justify-content: center;

        img {
            width: 12px;
            height: 12px;


        }

        .name {
            font-size: 12px;
            color: #0BA662;
            line-height: 12px;
        }

        .cell {
            font-size: 10px;
            color: #1F2120;
            margin-top: 13px;
        }
    }

    .list {
        padding: 20px 15px 0 15px;

        ul {
            li {
                padding: 5px 0;
                font-size: 10px;
                font-weight: 400;
                color: #1F2120;
                display: flex;
                align-items: center;
                justify-content: center;

                span {
                    flex: 1;

                    &:last-child {
                        flex: 120px 0 0;
                    }
                }
            }
        }
    }
}
</style>
